import { ButtonProps, Tooltip } from 'antd';
import { CSSProperties, ReactNode } from 'react';

type Props = {
  disabled?: boolean;
  tipText: string;
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
} & ButtonProps;
export default function TipIconButton({
  disabled = false,
  children,
  className,
  style,
  tipText,
  onClick,
}: Props) {
  return (
    <Tooltip placement="topLeft" title={tipText}>
      <button
        disabled={disabled}
        style={{ cursor: disabled ? 'not-allowed' : 'pointer', ...style }}
        className={`flex cursor-pointer items-center justify-center rounded-full p-2 hover:bg-hover ${className}`}
        onClick={onClick}
      >
        {children}
      </button>
    </Tooltip>
  );
}
